<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            padding: 0;
            height: 100%;
            width: 100%;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="300px" id="as">
            <el-menu
                    background-color="rgba(255,255,255,0)"
                    default-active="2"
                    @select="menuChange"
                    class="el-menu-vertical-demo"
                    text-color="#303133"
                    active-text-color="#ffd04b">
                <div style="margin-bottom: 30px;text-align: center">
                    <img src="imgs/a.jpeg" style="width: 80px;height: 80px;border-radius: 50px;margin: 30px 0 0 8px"
                         alt="">
                    <p style="color:#303133;">欢迎回来</p>
                </div>
                <el-menu-item index="1">
                    <i class="el-icon-house"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-s-order"></i>
                        <span>入库单管理</span>
                    </template>

                    <el-menu-item index="2-1">库存展示</el-menu-item>
                    <el-menu-item index="2-2">库存添加</el-menu-item>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-first-aid-kit"></i>
                        <span>药品信息管理</span>
                    </template>
                    <el-menu-item index="3-1">药品详情</el-menu-item>
                    <el-menu-item index="3-2">加入药品</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-shopping-bag-1"></i>
                        <span>供应商管理</span>
                    </template>
                    <el-menu-item index="4-1">查看所有供应商</el-menu-item>
                    <el-menu-item index="4-2">添加供应商</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="5-1">显示所有用户信息</el-menu-item>
                    <el-menu-item index="5-2">添加新用户</el-menu-item>
                    <el-menu-item index="5-3">用户记录</el-menu-item>
                    <el-menu-item index="5-4">在线用户</el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>员工信息管理</span>
                    </template>
                    <el-menu-item index="6-1">显示所有员工</el-menu-item>
                    <el-menu-item index="6-2">添加新员工</el-menu-item>
                </el-submenu>

                <el-submenu index="7">
                    <template slot="title">
                        <i class="el-icon-message-solid"></i>
                        <span>消息通知</span>
                    </template>
                    <el-menu-item index="7-1">显示所有消息</el-menu-item>
                    <el-menu-item index="7-2">发布消息</el-menu-item>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">
                        <i class="el-icon-s-operation"></i>
                        <span>角色权限管理</span>
                    </template>
                    <el-menu-item index="8-1">查看权限</el-menu-item>
                    <el-menu-item index="8-2">添加权限</el-menu-item>
                    <el-menu-item index="8-3">查看员工</el-menu-item>
                    <el-menu-item index="8-4">员工权限</el-menu-item>
                </el-submenu>
                <el-menu-item index="9" style="margin-bottom: 100%">
                    <i class="el-icon-more"></i>
                    <span slot="title">关于我们</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="height: 100px;" id="he">
                <img src="imgs/b.jpeg" style="width: 100px;height: 50px" alt="">
                <div style="float: right;width: 100px;height: 40px;text-align: center">
                    <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                主题菜单<i class="el-icon-s-operation"></i>
                            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-plus" onclick="gfg_Run(1)">简约风格</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus" onclick="gfg_Run(2)">青春活力</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus-outline" onclick="gfg_Run(3)">蓝色海洋
                            </el-dropdown-item>
                            <el-dropdown-item icon="el-icon-check" onclick="gfg_Run(4)">红色情调</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div style="height: 50px;">
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-divider></el-divider>
                </div>
            </el-header>
            <el-main id="ma">
                <!-----------发布通知开始----------->
<!--                <el-card v-if="selectedIndex=='4-1'">-->
                <el-card style="text-align: center;height: 600px;">
                    <el-form ref="message" :model="message" style="width: 900px;margin: 0 auto" label-width="80px">

                        <el-form-item label="标题">
                            <el-col :span="12">
                                <el-input style="width: 300px;" placeholder="输入标题" v-model="message.title"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <input type="radio" v-model="message.category" value="注意">注意
                                <input type="radio" v-model="message.category" value="提示">提示
                            </el-col>
                        </el-form-item>
                        <el-form-item label="内容">
                            <el-input type="textarea" style="width: 800px" v-model="message.content"></el-input>
                        </el-form-item>
                        <el-button style="left: 100px;" @click="issue()" type="success" plain>发布</el-button>
                    </el-form>
                </el-card>
                <!-----------发布通知结束----------->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    function gfg_Run(x) {
        if (x == 1) {
            document.getElementById("as").style.background = "#b3d8ff";
            document.getElementById("he").style.background = "white";
            document.getElementById("ma").style.background = "white";
        } else if (x == 2) {
            document.getElementById("as").style.background = "greenyellow";
            document.getElementById("he").style.background = "lightgreen";
            document.getElementById("ma").style.background = "yellowgreen";
        } else if (x == 3) {
            document.getElementById("as").style.background = "#b3d8ff";
            document.getElementById("he").style.background = "#66b1ff";
            document.getElementById("ma").style.background = "lightskyblue";
        } else if (x == 4) {
            document.getElementById("as").style.background = "darksalmon";
            document.getElementById("he").style.background = "indianred";
            document.getElementById("ma").style.background = "mistyrose";
        }
    }

    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                message:{
                    title:"",content:"",category:""
                }
            }
        },
        methods: {
            issue(){
                axios.post("/message/insert",v.message).then(function (response) {
                        alert("添加完成")
                })
            }
        },

    })
</script>
</html>